/**
 * VideoDialog module
 */
 
 import eventHelper from "../../../util/EventHelper";

 var React = require("react");
 var tool = require("../../../util/tool");
 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var dataProvider = require("../provider/dataProvider");
 var Validator = require("../../../util/validator/Validator");
 var SingleUpload = require("../../../util/upload/SingleUpload");
 var VideoDialog = React.createClass({
    getInitialState: function (){
        return {
            errors: "",
            fileUploaded: false,
            is_local_v: 0,
            is_valid_video_src: false,
            videoUploaded: false,
        }
    },
    getInitialProps: function (){
        return {
            root: {},
            isEdit: false
        }
    },
    updateUploaded: function (uploaded){
        this.setState({
            fileUploaded: uploaded
        });
    },
    componentWillMount: function (){
        this.form = {
            model: {

            }
        };
        this.defaultSettings = {
            upload_url: storage.data.CONST.upload_url,
            md5Field: "music_md5",
            accept: "video/mp4",
            size: 50000000,
            placeholder: "请填写在线视频地址或者上传mp4格式文件",
            needInfo: false,
            isVideo: true,
            upload_info: $._('Upload MP4, support 50M')
        };
        var self = this;
        this.AlphaSettings = $.extend({}, this.defaultSettings, {
            isAlphaVideo: true,
            success: function (){
                self.AlphaReady = true;
            },
            error: function (){
                self.AlphaReady = false;
            }
        });

        this.RgbSettings = $.extend({}, this.defaultSettings, {
            isRgbVideo : true,
            success: function (){
                self.RgbReady = true;
            },
            error: function (){
                self.RgbReady = false;
            }
        })
        this.AlphaReady = false;
        this.RgbReady = false;
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnChangeVideoType: function (type, e){
        this.setState({
            is_local_v: type
        });
    },
    handleOnChangeVideoSrc: function (){
        var validator = Validator();

        validator.addRule($(this.refs.onlineVideoSrc), [{
            validator: "empty",
            error: $._('Video url required')
        }]);

        validator.addRule($(this.refs.onlineVideoSrc), [{
            validator: "video",
            error: $._('Video url error')
        }]);

        var errors = validator.execute();
        this.setState({
            is_valid_video_src: !errors,
            errors: errors
        });

        var src = $(this.refs.onlineVideoSrc).val();
        this.form.model = {
            html: src
        };
    },
    handleOnSubmit: function (){
        var is_edit_video = storage.data.is_edit_video,
            is_local_v = this.state.is_local_v,
            type = consts.WIDGET_TYPE.VIDEO,
            root = this.props.root,
            is_play_video = root.state.is_play_video,
            data, RgbData, AlphaData;

        root.closeDialog();
        // local
        if (is_local_v == "0"){
            data = this.refs.singleUpload.getBuildWidget();
            data.video_type = 0;
            data.auto_play = 1;
        // alpha
        } else if(is_local_v == '2') {
            RgbData = this.refs.RgbVideo.getBuildWidget();
            AlphaData = this.refs.AlphaVideo.getBuildWidget();
            data = $.extend({}, RgbData,AlphaData);
            data.video_type = 2;
            delete data.auto_play;
        // online
        } else {
            data = this.getBuildOnlineWidget();
            data.video_type = 1;
            data.auto_play = 1;
            delete data.md5;
            delete data.action.md5;
        }
        if (is_edit_video){
            var widget = dataProvider.getSpecifyWidgetById(storage.data.selectedWidgetId);
            var type = widget.action.type;
            if (is_local_v == "0"){
                widget = $.extend({}, widget, data);
                widget.video_type = 0;
                widget.auto_play = 1;
                delete widget.alpha_md5;
            } else if (is_local_v =='2'){
                widget = $.extend({}, widget, data);
                widget.video_type = 2;
                delete widget.auto_play;
            // online
            } else {
                widget.action = data.action;
                widget.action.type = type;
                widget.video_type = 1;
                widget.auto_play = 1;
                delete widget.alpha_md5;
                delete widget.md5;
            }
            widget.propertyChanged = true;
            widget.html = widget.action.html;
            widget.url = widget.action.url || widget.action.html;

            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);

            root.updateSpecifyWidget(widget);
            root.setState({
                selectedWidget: widget
            });
        } else if(is_play_video){
            var widget = dataProvider.getSpecifyWidgetById(storage.data.selectedWidgetId);
            var type = widget.action.type;
            if (is_local_v == "0"){
                data = this.refs.singleUpload.getBuildWidget();
                widget.action.html = data.action.html;
                widget.action.md5 = data.action.md5;
                widget.action.url = data.action.url;
            } else {
                data = this.getBuildOnlineWidget();
                widget.action.html = data.action.html;
                delete widget.action.md5;
                delete widget.action.url;
            }
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);

            root.updateSpecifyWidget(widget);
            root.setState({
                selectedWidget: widget
            });
        } else {
            root.addWidgetToPage(data);
        }
    },
    getBuildOnlineWidget: function (){
        var type = consts.WIDGET_TYPE.VIDEO, data;

        data = tool.getWidgetButtonByType(type);
        data = tool.getRebulidWidget(data, this.form.model);

        return data;
    },
    checkIosAndReady: function (){
        return this.AlphaReady && this.RgbReady;
    },
    render: function (){
        var is_local_v = this.state.is_local_v;
        var root = this.props.root;
        var type = consts.WIDGET_TYPE.VIDEO;
        var is_play_video = root.state.is_play_video;
        var rStyle = {
            top: "40%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };

        var uploadOpts = {
            maxFiles: 1,
            acceptedFiles: ".mp4"
        };

        var defaultSettings = this.defaultSettings;
        var localVideoNode = "";
        if (!is_local_v){
            defaultSettings.needInfo = true;
            localVideoNode =
                <div>
                    <SingleUpload ref="singleUpload" type={type} settings={defaultSettings} root={root} parent={this} />
                    <div className='form-group buttons'>
                        <button onClick={this.handleOnSubmit} type="button" disabled={!this.state.fileUploaded}>
                        <span>{$._("Submit")}</span>
                        </button>
                    </div>
                </div>
        }

        var onLineVideoNode = "";
        if (is_local_v == 1){
            onLineVideoNode =
                <div>
                    <div className="form-group error-tip">{this.state.errors}</div>
                    <div className="form-group web_upload_video">
                        <div className="single-upload-group col-sm-8 input-group" data-form="form" data-md5="form.model.md5" data-html="form.model.html" data-single-upload data-accept="video/mp4" data-md5-field="video_md5" placeholder={$._('Please write online video address')}>
                            <div className="default-status">
                                <input onBlur={this.handleOnChangeVideoSrc} onChange={this.handleOnChangeVideoSrc} ref="onlineVideoSrc" type="text" autofocus className="form-control" placeholder={$._('Please write online video address')} />
                            </div>
                        </div>
                    </div>
                    <div className="alert alert-warning alert-dismissable alert-closeer">
                        <span>{$._('Support video website,tecent,youku,tudou,aiqiyi')}</span>　
                    </div>
                    <div className="form-group buttons">
                        <button onClick={this.handleOnSubmit} type="button" disabled={!this.state.is_valid_video_src}>
                            <span>{$._("Submit")}</span>
                        </button>
                    </div>
                </div>
        }

        var alphaVideoNode = "";

        if (is_local_v == 2 && !is_play_video){
            alphaVideoNode  =
                <div className="AlphaVideo">
                    <div className="rgb-video">
                        <SingleUpload type={type} settings={this.RgbSettings} parent={this} root={root} ref='AlphaVideo'/>
                        <div className='rgb-info'>{$._("RGB video")}</div>
                    </div>
                    <div className="Alpha-video">
                        <SingleUpload type={type} settings={this.AlphaSettings} parent={this} root={root} ref="RgbVideo"/>
                        <div className='Alpha-info'>{$._('ALPHA video')}</div>
                    </div>
                    <div className="info_alert_3d">
                        <div>{$._('transparent video to alpha and rgb')}</div>
                        <div>{$._('support MP4, more info')}<a href="/web/resource/help?select=7" target='_blank'>{$._('How to make Alpha video')}</a></div>
                    </div>
                    <div className="form-group buttons">
                        <button onClick={this.handleOnSubmit} type="button" disabled={!this.state.videoUploaded}>
                            <span>{$._("Submit")}</span>
                        </button>
                    </div>
                </div>
        }

        var alphaVideoButton = "";
        if(!is_play_video){
            alphaVideoButton =
                <div onClick={this.handleOnChangeVideoType.bind(this, 2)} datatype="2"　className={"video_type_btn " + (is_local_v != 2 ? "noactivebtn" : "activebtn")}>
                    <span>{$._('Alpha video')}</span>
                </div>
        }
        return (
            <dialog id="videoDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <div name="form.name" className="form-horizontal upload_video">
                        <div className="widget-form-title">
                            <label>{$._("Upload video")}</label>
                        </div>
                        <div className={"is_video " + (is_play_video ? "is_video_noAlpha" : "")} >
                            <div onClick={this.handleOnChangeVideoType.bind(this, 0)} datatype="0" className={"video_type_btn " + (is_local_v == 0 ? "activebtn" : "noactivebtn")}>
                                <span>{$._("Local video")}</span>
                            </div>
                            <div onClick={this.handleOnChangeVideoType.bind(this, 1)} datatype="1" className={"video_type_btn videoInter " + (is_local_v == 1 ? "activebtn" : "noactivebtn")}>
                                <span>{$._("Online video")}</span>
                            </div>
                            {alphaVideoButton}
                        </div>
                        {localVideoNode}
                        {onLineVideoNode}
                        {alphaVideoNode}
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = VideoDialog;
